<template>
    <scroll-view scroll-y="true" class="scroll-wrap" >
        <!-- 主题 -->
        <image class="theme" :src="vuex_templateData.theme" mode="widthFix"></image>
        <!-- 图片列表 -->
        <view class="list-wrap" v-if="modeList.length > 0" @click.capture="hideMenu">
            <view class="item-group" v-for="(item, index) in modeList" :key="index" :class="`item-group` + index">
                <view class="item" v-for="(item2, index2) in item" :key="index2" :class="`item` + index2" :id="'item' + index + '-' + index2">
                    <image class="mode" :class="`mode` + item2.imageIndex" :src="getModePath(`mode` + item2.imageIndex)" mode="widthFix"></image>
                    <ImageItem
                        v-if="item2.image_url_c"
                        mode="aspectFill"
                        class="photo"
                        :class="`photo` + item2.imageIndex"
                        :photoData="item2"
                        :imageStyle="item2.imageIndex == 0 ? photoStyles[index].imageStyle : photoStyles[1].imageStyle"
                        :photoEleInfo="photoEleInfo"
                        :showEditMenu="activeClassName === `photo` + item2.imageIndex"
                        @click.native="showEditIcon(`photo` + item2.imageIndex)"
                        @delect="delect"
                        @replace="choosePhoto"
                    ></ImageItem>
                    <!--额外的一些图片  比如 第二张图的花朵部分 -->
                    <image :class="`icon` + item2.imageIndex" v-if="isShowIcon(`icon` + item2.imageIndex)" :src="getIconPath(`icon` + item2.imageIndex)" mode="widthFix"></image>
                </view>
            </view>
        </view>
        <!-- 底部小程序二维码 -->
        <BottomCode></BottomCode>
    </scroll-view>
</template>
<script>
import BottomCode from '../BottomCode.vue';
import LazyImage from '@/components/LazyImage/index.vue';
import ImageItem from '../ImageItem.vue';
import { uploadFile } from '@/common/utils.js';
import { mapList, getItemIndex } from '@/common/common.js';
import { template } from '@/mixins/template.js';
export default {
    name: 'Template0',
    data() {
        return {
            // 模板列表
            modeList: [],
            //
            modeNumArr: [1, 2, 1, 2, 2, 1],
            // 默认的图片
            defaultPhotoPath: require('../../static/posterPage/default.png'),
            // 图片样式
            photoStyles: [
                {
                    imageStyle: {
                        borderRadius: '100%'
                    }
                },
                {
                    imageStyle: {
                        borderRadius: '10rpx'
                    }
                }
            ],
            // 当前选择的图片的className
            activeClassName: '',
            // 图片宽高等信息
            photoEleInfo: {},
            // 额外的图标数组
            iconArr: [],
            // 照片背景底图
            modeArr: []
        };
    },
    props: {
        // 空白数据的列表 用于预览模板页面
        emptyList: {
            type: Array,
            default: function() {
                return [];
            }
        },
        // 预览模板（templete）预览作品(preview) 自己查看作品(view) 制作（make） 被查看作品（分享出去给其他人查看）(shareView)
        templateStatus: {
            type: String,
            default: ''
        }
    },
    mixins: [template],
    created() {
        uni.$on('hideMenu', data => {
            this.activeClassName = '';
        });
        this.iconArr = this.vuex_templateData.iconArr;
        this.modeArr = this.vuex_templateData.modeArr;
    },
    mounted() {},
    methods: {
        // 是否显示一些小的图标
        isShowIcon(icon) {
            for (let i = 0; i < this.iconArr.length; i++) {
                if (this.iconArr[i].icon.includes(icon)) {
                    return true;
                }
            }
        },
        // 获取图标的地址
        getIconPath(icon) {
            for (let i = 0; i < this.iconArr.length; i++) {
                if (this.iconArr[i].icon.includes(icon)) {
                    return this.iconArr[i].url;
                }
            }
        },
        // 获取每个图片的底图
        getModePath(mode) {
            for (let i = 0; i < this.modeArr.length; i++) {
                if (this.modeArr[i].mode.includes(mode)) {
                    return this.modeArr[i].url;
                }
            }
        },
        // 点击列表其他部分 隐藏删除和替换按钮
        hideMenu() {
            if (this.templateStatus === 'make') {
                this.activeClassName = '';
            }
        },
        //获取图片列表
        getList() {
            if (this.templateStatus === 'templete') {
                this.modeList = mapList(this.modeNumArr, this.emptyList);
                console.log(this.modeList);
            } else {
                if (this.vuex_selectedPhotosList.length > 0) {
                    this.modeList = mapList(this.modeNumArr, this.vuex_selectedPhotosList, this.defaultPhotoPath);
                    console.log(this.modeList);
                } else {
                    this.modeList = [];
                }
            }
        },
        // 显示编辑图片的按钮
        async showEditIcon(className) {
            // 如果只有是自己制作页面才显示编辑按钮
            if (this.templateStatus === 'make') {
                this.activeClassName = className;
                this.photoEleInfo = await this.$uniPromise.getEleInfo(`.${className}`, this);
            }
        },
        // 删除照片
        delect(item) {
            // 如果是默认图片的话 提示不能删除
            if (item.isDefault) {
                this.$showToast('默认图片不可删除');
                return;
            }
            if (this.vuex_selectedPhotosList.length <= 1) {
                this.$showToast('请至少保留一张照片');
                return;
            }
            let index = getItemIndex(this.vuex_selectedPhotosList, item, 'albumid');
            let list = JSON.parse(JSON.stringify(this.vuex_selectedPhotosList));
            list.splice(index, 1);
            this.activeClassName = '';
            this.$u.vuex('vuex_selectedPhotosList', list);
        },
        // 选择照片进行上传
        async choosePhoto(item) {
            let photo = await this.$uniPromise.chooseImage({ count: 1 });
            photo && photo.tempFilePaths.length > 0 && this.startUpload(photo.tempFilePaths[0], item);
        },
        // 开始上传照片
        startUpload(path, item) {
            setTimeout(() => {
                this.$showLoading();
            }, 500);
            uploadFile(`${this.$config.baseUrl}/api/upload/obs`, path, this.$config.tokenKey, {}, true)
                .then(res => {
                    if (res.RequestStatus === 100 && res.Data) {
                        this.replacePhoto(res.Data, item);
                    }
                    this.$hideLoading();
                })
                .catch(err => {
                    this.$hideLoading();
                });
        },
        // 替换照片
        replacePhoto(target, item) {
            let list = JSON.parse(JSON.stringify(this.vuex_selectedPhotosList));
            target.isSelected = true;
            target.id = target.albumid;
            if (item.isDefault) {
                target.selectedIndex = list.length + 1;
                target.imageIndex = list.length - 1;
                list.push(target);
            } else {
                target.selectedIndex = item.selectedIndex;
                target.imageIndex = item.imageIndex;
                let index = getItemIndex(this.vuex_selectedPhotosList, item);
                list[index] = target;
            }
            this.$u.vuex('vuex_selectedPhotosList', list);
        }
    },
    watch: {
        emptyList: {
            handler(newVal, oldVal) {
                this.getList();
            },
            immediate: true,
            deep: true
        },
        vuex_selectedPhotosList: {
            handler(newVal, oldVal) {
                if (newVal.length > 0) {
                    this.getList();
                }
            },
            deep: true
        }
    },
    components: { LazyImage, BottomCode, ImageItem }
};
</script>
<style lang="scss" scoped>
.scroll-wrap {
    height: 100vh;
    .theme {
        width: 100%;
    }
    .list-wrap {
        width: 660rpx;
        margin: 45rpx 45rpx 0;
        background: #fff0f0;
        border-radius: 10rpx;
        .item-group {
            width: 100%;
            position: relative;
            .item {
                width: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
                .mode {
                    position: relative;
                    width: 750rpx;
                    left: 50%;
                    top: 0;
                    transform: translate(-50%, 0);
                }
                .mode2 {
                    position: absolute;
                    width: 375rpx;
                    right: 0;
                    top: 0;
                    transform: translate(0, 0);
                }
                .mode5 {
                    position: absolute;
                    width: 418rpx;
                    left: 287rpx;
                    top: 0;
                    transform: translate(0, 0);
                }
            }
            .item0 {
                position: relative;
                left: 0;
                top: 0;
            }
        }
        .item-group1 {
            z-index: 10;
        }
        .photo {
            position: absolute;
            border-radius: 10rpx;
            z-index: 2;
        }
        .photo-empty {
            position: absolute;
            border-radius: 10rpx;
            z-index: 2;
            // background: #ccc;
        }
        .photo0 {
            left: 130rpx;
            top: 110rpx;
            width: 390rpx;
            height: 390rpx;
            border-radius: 100%;
        }
        .photo1 {
            left: 66rpx;
            top: 68rpx;
            width: 220rpx;
            height: 332rpx;
            z-index: 3;
        }
        .icon1 {
            position: absolute;
            left: 15rpx;
            top: 284rpx;
            width: 169rpx;
            height: 43rpx;
            z-index: 4;
        }
        .photo2 {
            left: 384rpx;
            top: 68rpx;
            width: 220rpx;
            height: 332rpx;
            z-index: 1;
        }
        .photo3 {
            left: 102rpx;
            top: 104rpx;
            width: 462rpx;
            height: 298rpx;
        }
        .photo4 {
            left: 52rpx;
            top: 104rpx;
            width: 308rpx;
            height: 206rpx;
        }
        .photo5 {
            left: 310rpx;
            top: 252rpx;
            width: 308rpx;
            height: 206rpx;
            z-index: 2;
        }

        .photo6 {
            left: 72rpx;
            top: 58rpx;
            width: 220rpx;
            height: 332rpx;
        }
        .photo7 {
            left: 406rpx;
            top: 224rpx;
            width: 162rpx;
            height: 204rpx;
        }
        .photo8 {
            left: 264rpx;
            top: 150rpx;
            width: 344rpx;
            height: 220rpx;
        }
    }
}
</style>
